<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input v-model="taskKey" placeholder="请输入任务key值查询" style="width: 150px;" class="filter-item" @keyup.enter.native="handleFilter" />
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="findAll(size,current)">搜索</el-button>
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="clearfind">重置</el-button>
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-edit" @click="add">新增</el-button>
    </div>
    <el-table
      :key="tableKey"
      v-loading="listLoading"
      :data="records"
      border
      fit
      highlight-current-row
      style="width: 100%;"
      @sort-change="sortChange"
      ref="multipleTable"
    >
      <el-table-column type="selection" width="50"></el-table-column>
      <el-table-column fixed prop="id" label="ID" width="100" align="center">
      </el-table-column>
      <el-table-column prop="taskKey" label="任务key值" width="200" :show-overflow-tooltip='true' align="center">
        <template slot-scope="{row}">
             <span class="link-type" @click="updateCollectid(row.id)">{{ row.taskKey }}</span>
          </template>
      </el-table-column>
      <el-table-column prop="name" label="任务名称" width="150" :show-overflow-tooltip='true' align="center">
      </el-table-column>
      <el-table-column prop="cron" label="Cron表达式" width="150">
      </el-table-column>
      <el-table-column prop="status" label="状态" :show-overflow-tooltip='true' width="100" align="center">
      </el-table-column>
      <el-table-column prop="collectionId" label="测试合集id" width="100" align="center">
      </el-table-column>
      <el-table-column prop="createName" label="创建人" width="70" align="center">
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" min-width="100" :show-overflow-tooltip='true' align="center">
      </el-table-column>
      <el-table-column prop="updateName" label="修改人" width="70" align="center">
      </el-table-column>
      <el-table-column prop="updateTime" label="更新时间" min-width="100" :show-overflow-tooltip='true' align="center">
      </el-table-column>
      <el-table-column fixed="right" label="操作" min-width="220">
        <template slot-scope="scope">
         <el-button @click="start(scope.row.id)" type="success" size="mini">启动</el-button>
         <el-button @click="updateCollectid(scope.row.id)" type="primary" size="mini">编辑</el-button>
         <el-button @click="deleteBy(scope.row.id)" type="danger" size="mini">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination-container">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="current"
        :page-sizes="pagesizes" :page-size="size" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>


  </div>
</template>

<script>
  import waves from '@/directive/waves'
  import {findAllList,startTaskKey,deleteScheduled,scheduledAddPost,scheduledUpdatePut,getDetail} from '@/api/automation/scheduled'
  export default {
    name: 'scheduled',
    directives: { waves },
    data(){
      return{
        tableKey:0,
        listLoading: true,
        current: 1,
        size: 10,
        total: 0,
        pagesizes: [10, 20, 50, 100],
        records: [],
        taskKey:"",
        formLabelWidth: '120px',
        ScheduledAdd:{},
        redisKey:{},
        updateDate:""
      }
    },
    methods: {
      //条数变更
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.findAll(val, this.current)
      },
      //页码变更
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.findAll(this.size, val)
      },
      findAll(size,current){
        this.listLoading=true
        findAllList({
          current: current,
          size: size,
          taskKey:this.taskKey
        }).then(resp=>{
            this.total = resp.data.total;
            this.current = resp.data.current;
            this.size = resp.data.size;
            this.records=resp.data.records;
            for(var i=0;i<this.records.length;i++){
              if(this.records[i].status==0){
                this.records[i].status="禁用"
              }else{
                this.records[i].status="启用"
              }
            }
            setTimeout(() => {
              this.listLoading = false
            }, 1.5 * 1000)
        })
      },
      start(taskKey){
        startTaskKey(taskKey).then(resp=>{
            this.$message({
                      message: resp.msg,
                      type: 'success'
                    });
            this.findAll(this.size,this.current);
        })
      },
      deleteBy(id){
        deleteScheduled(id).then(resp=>{
            this.$message({
                      message: resp.msg,
                      type: 'success'
                    });
            this.findAll(this.size,this.current);
        })
      },
      add(){
        this.$router.push({
          name:"scheduledFrom",
          query:{isAdd:true}
        })
        // this.ScheduledAdd={};
        // this.dialogFormAddVisible=true;
      },
      updateCollectid(id){
        this.$router.push({
          name:"scheduledFrom",
          query:{isAdd:false,id:id}
        })
      },
      clearfind(){
        this.taskKey="";
        this.findAll(10,1);
      },
      sortChange(data) {
        const { prop, order } = data
        if (prop === 'id') {
          this.sortByID(order)
        }
      }

    },
    created() {
      this.findAll(this.size,this.current);
    }
  }
</script>

<style>
</style>
